<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>百色市2022年跨省外出务工就业乘车报名登记表</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="http://cdn.staticfile.org/vant/2.12.5/index.css">
  <style> 

  </style>
</head>
<body style="background-color: #fefefe;">
<div id="app">

  <!--选择户籍所在地 action-->
  <van-action-sheet v-model="showAddress" >
    <van-picker show-toolbar title="选择户籍所在地" :columns="address_columns" @cancel="showAddress = false" @confirm="selectAddress" />
  </van-action-sheet>

  <!--乘车地点的 action-->
  <van-action-sheet v-model="showTravelAddress" >
    <van-picker show-toolbar title="选择乘车地点" :columns="travel_address_columns" @cancel="showTravelAddress = false" @confirm="selectTravelAddress" />
  </van-action-sheet>

  <!--选择目的地的 action-->
  <van-action-sheet v-model="showDestination" >
    <van-picker show-toolbar title="选择目的地" :columns="destination_columns" @cancel="showDestination = false" @confirm="selectDestination" />
  </van-action-sheet>

  <!--选择出行日期和时间段的 action-->
  <van-action-sheet v-model="showTravelDate" >
    <van-picker show-toolbar title="选择出行日期及时间段" :columns="travel_date_columns" @cancel="showTravelDate = false" @confirm="selectTravelDate" />
  </van-action-sheet>

  <!--数字键盘-->
  <van-number-keyboard :show="showPhoneKeyboard" title="手机号" close-button-text="关闭" @blur="blurPhone" @input="onPhoneInput" @delete="onPhoneDelete" ></van-number-keyboard>

  <!--身份证键盘-->
  <van-number-keyboard :show="showIdcardKeyboard" title="身份证号" close-button-text="关闭" extra-key="X" @blur="blurIdcard" @input="onIdcardInput" @delete="onIdcardDelete" ></van-number-keyboard>

  <div v-show="loading" style="width:100%;height:100%;text-align: center;" >
    <img src="/images/timg.gif" width="80" height="60" style="margin-top: 100px;" />
    <div style="font-size: 1.2rem;margin-top: 20px;">页面加载中。。。</div>
  </div>

  <div v-show="!loading" style="display: none;">
    <div style="padding: 40px 20px 40px 20px; text-align: center;font-size: 1.5rem;background-color: rgb(81, 156, 81);color: #fefefe;">
      百色市2022年跨省外出务工就业乘车报名登记表
    </div>
    <div style="padding: 20px 20px 20px 20px; text-align: right;font-size: 0.8rem;background-color: rgb(81, 156, 81);color: #fefefe; display: none;">
      <span style="color: rgb(205, 211, 205);">百色市人力资源和社会保障局</span><br>
      <span style="color: rgb(205, 211, 205);">广西驰程汽车运输有限责任公司</span>
    </div>
  
    <van-notice-bar wrapable :scrollable="false"
      text="温馨提示：请如实填写，发车前五个工作日内将有工作人员与您联系确认，请保持电话畅通，谢谢配合。"></van-notice-bar>
  
    <van-form ref="enrollForm" style="padding: 10px;" @submit="submitEnroll">
      <van-field v-model="passenger.name" name="name" label="姓名" placeholder="身份证上的名字" required
        :rules="[{required:true, message: ''},{validator:validatorChsLen, message: '名字必须2个字以上'},{validator:validatorChs, message: '姓名不能包含数字字母等其它字符'}]"></van-field>
      <van-field name="sex" label="性别" required :rules="[{ required: true, message: '' }]">
        <template #input>
          <van-radio-group v-model="passenger.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-model="passenger.idcard" name="idcard" label="身份证号" placeholder="二代身份证上的号码" required @click="showIdcardKeyboard = true" readonly
        :rules="[{required: true, message: ''},{validator:validatorIdcard, message: '身份证号码格式有误'}]"></van-field>
      <van-field v-model="hj_address" name="hj_address" label="户籍所在地" placeholder="户籍所在地" required @click="showAddress = true" readonly
        :rules="[{ required: true, message: '' }]"></van-field>
      <van-field v-model="passenger.phone" name="phone" label="联系电话" placeholder="手机号码" required @click="showPhoneKeyboard = true" readonly
        :rules="[{required: true, message: ''},{validator:validatorPhone, message: '手机号码格式有误'}]"></van-field>
      <van-field v-model="travel_date" name="travel_date" label="乘车时间" placeholder="您的计划出行时间" required @click="showTravelDate = true" readonly
        :rules="[{ required: true, message: '' }]"></van-field>
      <van-field v-model="cc_address" name="cc_address" label="乘车地点" placeholder="请先选择户籍所在地" required @click="showTravelAddress = true" readonly
        :rules="[{ required: true, message: '' }]"></van-field>
      <van-field v-model="des_address" name="des_address" label="目的地" placeholder="您计划到达的目的地" required @click="showDestination = true" readonly
        :rules="[{ required: true, message: '' }]"></van-field>
      <van-field v-model="passenger.enterprise_name" name="enterprise_name" label="企业名称" placeholder="劳务企业名称" required 
        :rules="[{ required: true, message: '' }]"></van-field>
      <van-field v-model="passenger.enterprise_phone" name="enterprise_phone" label="联系人电话" placeholder="劳务企业联系人的电话" required 
        :rules="[{ required: true, message: '' }]"></van-field> 
      <van-field name="carrying_children" label="携带儿童">
        <template #input>
          <van-radio-group v-model="passenger.carrying_children" direction="horizontal">
            <van-radio name="是">是</van-radio>
            <van-radio name="否">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="filing" label="劳动力类型">
        <template #input>
          <van-radio-group v-model="passenger.filing" direction="horizontal">
            <van-radio name="脱贫劳动力" style="margin-bottom: 10px;">脱贫劳动力</van-radio>
            <van-radio name="监测户劳动力" style="margin-bottom: 10px;">监测户劳动力</van-radio>
            <van-radio name="一般劳动力" >一般劳动力</van-radio> 
          </van-radio-group>
        </template>
      </van-field> 
      <van-field v-model="passenger.passenger_ext" name="passenger_ext" label="其他说明" placeholder="其他说明" type="textarea" rows="2" autosize
        ></van-field>
  
      <div style="font-size: 10px;margin-top: 20px;padding-left: 20px;">
        <van-radio-group v-model="agree">
          <van-radio name="1" icon-size="16px" >我已阅读并同意<span style="color: darkgreen;">《出行预约信息收集及隐私保护协议》</span> </van-radio> 
        </van-radio-group>
      </div>
       
      <div style="margin: 16px;">
        <van-button round block type="info" >提交</van-button>
      </div> 
    </van-form>
  </div>

  

</div>
</body>
<!-- 先引入 Vue -->
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="http://cdn.staticfile.org/vant/2.12.5/vant.min.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script> 
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="/js/my_util.js?t=a21223"></script> 
<script src="/js/validate.js?t=21223"></script> 
<script src="/js/hj_address.js?t=21223"></script> <!--户籍所在地 json -->
<script src="/js/start_address.js?t=21223"></script> <!--乘车地点 json -->
<script src="/js/destination_address.js?t=21111"></script> <!--目的地 json -->
<script> 

  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
  // Vue.use(vant.Lazyload);  

  var travel_date_config = [
        // 第一列
        {
          values: [
            '3月24日','3月25日','3月26日','3月27日','3月28日','3月29日','3月30日','3月31日',
            '4月01日','4月02日','4月03日','4月04日','4月05日','4月06日','4月07日','4月08日','4月09日','4月10日','4月11日','4月12日',
            '4月13日','4月14日','4月15日',],
          defaultIndex: 1,
        },
        // 第二列
        {
          values: ['08:00 - 11:00', '11:00 - 14:00', '14:00 - 17:00'],
          defaultIndex: 0,
        },
      ];

  var vm = new Vue({
    el: '#app',
    data: function () {
      return { 
        loading:true,           // 是否显示等待中
        passenger:{sex:'男', carrying_children:'否',filing:'脱贫劳动力',status:1},                  // 乘客信息 
        agree:'1',                              // 是否已阅读并同意xxx
        showAddress:false,                      // 是否显示地址选择器
        showTravelAddress:false,                // 是否现实乘车地点选择器
        showDestination:false,                  // 是否显示地址选择器
        showTravelDate:false,                   // 是否显示出行时间选择器
        showPhoneKeyboard:false,                // 是否显示手机号码输入键盘
        showIdcardKeyboard:false,               // 是否显示身份证号码输入键盘
        address_columns:bs_address,             // 家庭住址json地址库
        travel_address_columns:[],              // 乘车地点json地址库
        destination_columns:destination_address,
        travel_date_columns:travel_date_config, 
      }
    },
    computed: {
      hj_address: function () {
        if(isNoNull(this.passenger.hj_village)){
          return this.passenger.hj_county + this.passenger.hj_town + this.passenger.hj_village; 
        } else {
          return '';
        } 
      },
      cc_address: function () {
        if(isNoNull(this.passenger.cc_town)){ 
          return this.passenger.cc_county + this.passenger.cc_town ; 
        } else {
          return '';
        }
      },
      des_address: function(){ 
        if(isNoNull(this.passenger.des_county)){ 
          return this.passenger.des_provice + this.passenger.des_city + this.passenger.des_county;
        } else {
          return '';
        }
      },
      travel_date: function(){ 
        if(isNoNull(this.passenger.travel_time)){ 
          return this.passenger.travel_day + ' ' + this.passenger.travel_time;
        } else {
          return '';
        }
      },
    },
    methods: { 

      // 判断姓名字符数是否足够
      validatorChsLen(str) {
        if(str != undefined && str != null && str != ''){
          if(str.length > 1){
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        } 
      },

      // 判断是否中文
      validatorChs(str) {
        return isvalidChs(str);
      },

      // 判断是否是身份证号
      validatorIdcard(str) {
        return isvalidIdCard(str);
      },

      // 判断是否是手机号
      validatorPhone(str) {
        return isvalidPhone(str);
      },

      // 选择户籍所在地事件
      selectAddress:function(index){
        vm.$set(this.passenger, "hj_county", index[0]);   // 户籍所在地-区（县，市）
        vm.$set(this.passenger, "hj_town", index[1]);     // 户籍所在地-乡镇
        vm.$set(this.passenger, "hj_village", index[2]);  // 户籍所在地-村 

        vm.$set(this.passenger, "cc_county", index[0]);   // 乘车地-区（县，市）
        vm.$set(this.passenger, "cc_town", index[1]);     // 乘车地-乡镇  

        // 设置乘车地选择项，乘车地不能改变所属区
        for(var i = 0; i < start_address.length; i++){
          var county = start_address[i];
          if(county.text == index[0]){
            vm.travel_address_columns = county.children;
            break;
          }
        } 

        this.showAddress = false;

        if(false && this.passenger.hj_county == '平果市') {

          vant.Dialog.alert({
            title: '名额已满',
            message: '平果市点对点直通车名额已满，更多乘车资讯请联系平果汽车总站（0776-5880171）了解！',
          }).then(() => {
            // on close
          });

        }


      },

      // 选择乘车地事件(乘车地不能改变所属区)
      selectTravelAddress:function(index){
        console.log(index);
        //vm.$set(this.passenger, "cc_county", index[0]);   // 乘车地-区（县，市）
        vm.$set(this.passenger, "cc_town", index.text);     // 乘车地-乡镇  

        this.showTravelAddress = false;
      },

      // 选择目的地
      selectDestination:function(index){
        vm.$set(this.passenger, "des_provice", index[0]);   // 目的地-省
        vm.$set(this.passenger, "des_city", index[1]);      // 目的地-市
        vm.$set(this.passenger, "des_county", index[2]);    // 目的地-区

        this.showDestination = false;
      },

      // 选择出行时间段
      selectTravelDate:function(index){
        vm.$set(this.passenger, "travel_day", index[0]);   // 出行日期 
        vm.$set(this.passenger, "travel_time", index[1]);  // 出行时间 

        this.showTravelDate = false;
      },

      // 按下手机号键盘数字键
      onPhoneInput:function(v){ 
        if(this.passenger.phone){
          vm.$set(this.passenger, "phone", this.passenger.phone + '' +  v); 
        } else {
          vm.$set(this.passenger, "phone", '' +  v);  
        } 
      },

      // 按下手机号键盘的删除建
      onPhoneDelete:function(){
        if(this.passenger.phone && this.passenger.phone.length > 0){
          vm.$set(this.passenger, "phone", this.passenger.phone.substr(0, this.passenger.phone.length - 1)); 
        }  
      },

      // 关闭手机号键盘后事件
      blurPhone:function(){
        this.showPhoneKeyboard = false;
        this.$refs.enrollForm.validate('phone');
      },

      // 按下手机号键盘数字键
      onIdcardInput:function(v){ 
        if(this.passenger.idcard){
          vm.$set(this.passenger, "idcard", this.passenger.idcard + '' +  v); 
        } else {
          vm.$set(this.passenger, "idcard", '' +  v);  
        } 
      },

      // 按下手机号键盘的删除建
      onIdcardDelete:function(){
        if(this.passenger.idcard && this.passenger.idcard.length > 0){
          vm.$set(this.passenger, "idcard", this.passenger.idcard.substr(0, this.passenger.idcard.length - 1)); 
        }  
      },

      // 关闭身份证号键盘后事件
      blurIdcard:function(){
        this.showIdcardKeyboard = false;
        this.$refs.enrollForm.validate('idcard');

        ageValidate(); //年龄校验 
      },

      // 提交报名
      submitEnroll(){ 
        console.log(this.passenger);

        if(false && this.passenger.hj_county == '平果市') {

          vant.Dialog.alert({
            title: '名额已满',
            message: '平果市点对点直通车名额已满，更多乘车资讯请联系平果汽车总站（0776-5880171）了解！',
          }).then(() => {
            // on close
          });

        } else {

          if(ageValidate() === true) {
            vant.Toast.loading({
              message: '登记中，请稍等...',
              forbidClick: true,
              duration: 0,  // 时间0，不会自动关闭
            });

            axios.post('/guest/enroll/edit/enroll_passenger!save.bu', this.passenger)
              .then(function (response) {
                if (response.data.code > 0) { 
                  //vant.Notify({ type: 'success', message: response.data.msg });

                  window.location.href="/view/weixin/enroll/success.html";

                  // 取消等待中loading
                  vant.Toast.clear();
                } else if(response.data.code == 0){
                  vant.Toast.clear();
                  vant.Dialog.confirm({
                    title: '提示',
                    message: response.data.msg,
                    confirmButtonText:'覆盖',
                  }).then(() => {
                    vm.coverEnroll();
                  }).catch(() => {
                    vant.Toast.clear();
                  });
                } else {
                  vant.Notify({ type: 'warning', message: response.data.msg });

                  vant.Toast.clear();
                }
                
              })
              .catch(function (error) {
                vant.Notify({ type: 'warning', message: '网络异常...' });
                vant.Toast.clear();
              });
          }  

        } 

        //vant.Dialog({ message: '您的乘车申请已经被记录，发车前五个工作日内将有工作人员与您联系确认，请保持电话畅通，谢谢配合。' });
      },

      // 提交报名(覆盖)
      coverEnroll(){  
        axios.post('/guest/enroll/edit/enroll_passenger!cover.bu', this.passenger)
          .then(function (response) {
            if (response.data.code > 0) { 
              //vant.Notify({ type: 'success', message: response.data.msg });

              window.location.href="/view/weixin/enroll/success.html";

              vant.Toast.clear();
            } else {
              vant.Notify({ type: 'warning', message: response.data.msg });

              vant.Toast.clear();
            }
            
          })
          .catch(function (error) {
            vant.Notify({ type: 'warning', message: '网络异常...' });
            vant.Toast.clear();
          }); 
      },

    }
  }) 

  // 年龄校验
  function ageValidate(){
    console.log('身份证:' + vm.passenger.idcard);
    let age = getAgeByIdcard(vm.passenger.idcard);
    console.log('年龄:' + age);
    if(age < 16){
      vant.Dialog.alert({
        title: '年龄未满16岁',
        message: '您年龄未满16岁，报名失败。更多乘车资讯请关注《驰程出行》公众号！',
      }).then(() => {
        return false;
      });
    } else if (age > 60) {
      vant.Dialog.alert({
        title: '年龄超过60岁',
        message: '您年龄超过60岁，报名失败。更多乘车资讯请关注《驰程出行》公众号！',
      }).then(() => {
        return false;
      });
    } else {
      return true;
    }
  }


  function initData(){ 
    vm.loading = false;  
  }


  initData(); 
</script>
</html>